<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta HTTP-EQUIV="pragma" CONTENT="no-cache">
    <meta HTTP-EQUIV="Cache-Control" CONTENT="no-cache">
    <meta HTTP-EQUIV="expires" CONTENT="0">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>资源管理</title>
    <meta name="keywords" content="">
    <meta name="description" content="">
    <link href="css/bootstrap.min.css" rel="stylesheet">
    <link href="css/font-awesome.css" rel="stylesheet">
    <link href="css/animate.css" rel="stylesheet">
    <link href="css/plugins/jsTree/style.min.css" rel="stylesheet">
    <link href="css/plugins/webuploader/webuploader.css" rel="stylesheet" >
    <link href="css/style.css" rel="stylesheet">
    <link href="css/layui.css" rel="stylesheet">
    <style>
        #nestable,
        #jstree2 {
            width: 30%;
            float: left;
            height: 100%;
            border-right: 1px solid #eee;
            padding: 10px;
            background: #fff;
        }

        .pull-right i {
            margin: 0 5px;
        }

        #jstree1 {
            padding: 10px;
        }

        .box-right {
            width: 70%;
            float: right;
            padding: 10px;
            height: 100%;
            background: #fff;
        }

        #uploadImg {
            position: absolute;
            top: 50%;
            left: 48%;
            z-index: 999;
            visibility: visible;
        }

        #bg {
            background: #eee;
            position: absolute;
            z-index: 998;
            display: none;
            width: 100%;
            height: 100%;
            filter: alpha(opacity=50);
            -moz-opacity: 0.5;
            -khtml-opacity: 0.5;
            opacity: 0.5;
        }
        .form-group-self {
            margin-bottom: 8px;
        }
    </style>
</head>

<body class="gray-bg animated fadeInRight">
    <div id="bg"></div>
    <div id="fileList" class="uploader-list" style="display:none;"></div>
    <div class="row wrapper border-bottom white-bg page-heading">
        <div class="col-sm-4">
            <h2>资源管理</h2>
            <ol class="breadcrumb">
                <li>
                    <a class="J_menuItem">首页</a>
                </li>
                <li>
                    <a>系统管理</a>
                </li>
                <li>
                    <strong>资源管理</strong>
                </li>
            </ol>
        </div>
    </div>
    <div class="wrapper wrapper-content" style="height:100%">

        <!--<div class="form-group-self">-->
            <!--<label class="col-xs-3 control-label" style="width: 75px;margin-top: 5px;">应用：</label>-->
            <!--<div class="layui-input-inline layui-form">-->
                <!--<select name="app" id="app" lay-filter="app">-->
                    <!--<option value="0" selected="">后台管理</option>-->
                    <!--<option value="1" >app客户端</option>-->
                <!--</select>-->
            <!--</div>-->
        <!--</div>-->

        <div id="jstree2">
            <ul>
            </ul>
        </div>

        <div class="box-right" style="display:none;">
            <button class="btn btn-success btn-sm" title="保存" style="margin:10px;" id="save">保存</button>
            <div class="row">
                <div class="col-sm-10">
                    <div class="form-group">
                        <label class="col-sm-3 control-label" style="padding-top:10px;">资源名称：</label>
                        <div class="col-sm-5">
                            <input type="text" class="form-control" name="password" id="resource_name">
                        </div>
                    </div>
                </div>
                <div class="col-sm-10" style="margin-top:15px;">
                    <div class="form-group">
                        <label class="col-sm-3 control-label" style="padding-top:10px;">资源描述：</label>
                        <div class="col-sm-5">
                            <input type="text" class="form-control" name="password" id="description">
                        </div>
                    </div>
                </div>
                <div class="col-sm-10" style="margin-top:15px;">
                    <div class="form-group">
                        <label class="col-sm-3 control-label" style="padding-top:10px;">资源路径：</label>
                        <div class="col-sm-5">
                            <input type="text" class="form-control" name="password" id="resource_request_uri">
                        </div>
                    </div>
                </div>
                <div class="col-sm-10" style="margin-top:15px;">
                    <div class="form-group">
                        <label class="col-sm-3 control-label" style="padding-top:10px;">权限字符串：</label>
                        <div class="col-sm-5">
                            <input type="text" class="form-control" name="password" id="permissions_code">
                        </div>
                    </div>
                </div>
                <div class="col-sm-10" style="margin-top:15px;">
                    <div class="form-group">
                        <label class="col-sm-3 control-label" style="padding-top:10px;">图标：</label>
                        <div class="col-sm-5">
                            <input type="text" class="form-control" name="password" id="resource_image_uri">
                        </div>
                    </div>
                </div>
                <div class="col-sm-10" style="margin-top:15px;">
                    <div class="form-group">
                        <label class="col-sm-3 control-label" style="padding-top:10px;">排序：</label>
                        <div class="col-sm-5">
                            <input type="num" class="form-control" name="password" id="priority" onkeyup="this.value=this.value.replace(/\D/g,'')" onafterpaste="this.value=this.value.replace(/\D/g,'')">
                        </div>
                    </div>
                </div>
                <div class="col-sm-10" style="margin-top:15px;">
                    <div class="form-group">
                        <label class="col-sm-3 control-label" style="padding-top:10px;">资源类型：</label>
                        <div class="col-sm-5">
                            <div class="form-group">
                                <select class="form-control select" name="" id="resource_type">
                                    <option value="menu">menu</option>
                                    <option value="button">button</option>
                                    <option value="url">url</option>
                                </select>
                            </div>
                        </div>
                    </div>
                </div>

         
            </div>
        </div>
    </div>
    <!-- 全局js -->
    <script src="js/jquery.min.js"></script>
    <script src="js/bootstrap.min.js"></script>
    <!-- 自定义js -->
    <script src="js/content.js"></script>
    <script src="js/plugins/layer/layer.js"></script>
    <script src="js/plugins/jsTree/jstree.min.js"></script>
    <script src="js/plugins/webuploader/webuploader.min.js"></script>
    <script src="js/work/common.js"></script>
    <script src="js/layui.js"></script>
    <script>
        var newId = "";
        var newPosition = "";
        var isCopy = 0;
        var resource_id = '';

        var selectAppKey;
        var from;

        // layui表单使用
        layui.use(['form'], function(){
            // form = layui.form;
            // form.on('select(app)', function (data) {
            //     if (data.value == 0) {          // 选择的是后台
            //         selectAppKey = appKey;
            //         initData();
            //     } else if (data.value == 1) {   // 选择的是app
            //         selectAppKey = androidAppKey;
            //         initData();
            //     }
            // });
        });

        $(document).ready(function () {
            // 默认为后台应用key
            selectAppKey = appKey;
            initData();
        });

        function context_menu(node) {
            var tree = $('#jstree2').jstree(true);
            var disabled = false;
            console.log(node);
            if (node.parents.length > 1) {
                disabled = false
            } else {
                disabled = true
            }
            var items = {
         
                "create": {
                    "separator_before": false,
                    "separator_after": true,
                    "_disabled": false,
                    "label": "新建",
                    "action": function (data) {
                        var inst = $.jstree.reference(data.reference),
                            obj = inst.get_node(data.reference);
                        inst.create_node(obj, {

                            },
                            "last",
                            function (new_node) {
                                setTimeout(function () {
                                        inst.edit(new_node)
                                    },
                                    0)
                            })
                    }
                },
            
                "remove": {
                    "separator_before": false,
                    "icon": false,
                    "separator_after": false,
                    "_disabled": disabled,
                    "label": "删除",
                    "action": function (data) {
                        var inst = $.jstree.reference(data.reference),
                            obj = inst.get_node(data.reference);
                        if (inst.is_selected(obj)) {
                            inst.delete_node(inst.get_selected())
                        } else {
                            inst.delete_node(obj)
                        }
                    }
                },
                "ccp": {
                    "separator_before": true,
                    "icon": false,
                    "separator_after": false,
                    "label": "操作",
                    "action": false,
                    "_disabled": false,
                    "submenu": {
                        "cut": {
                            "separator_before": false,
                            "separator_after": false,
                            "label": "剪贴",
                            "_disabled": true,
                            "action": function (data) {
                                var inst = $.jstree.reference(data.reference),
                                    obj = inst.get_node(data.reference);
                                if (inst.is_selected(obj)) {
                                    inst.cut(inst.get_top_selected())
                                } else {
                                    inst.cut(obj)
                                }
                            }
                        },
                        "copy": {
                            "separator_before": false,
                            "icon": false,
                            "separator_after": false,
                            "label": "复制",
                            "_disabled": true,
                            "action": function (data) {
                                var inst = $.jstree.reference(data.reference),
                                    obj = inst.get_node(data.reference);
                                if (inst.is_selected(obj)) {
                                    inst.copy(inst.get_top_selected())
                                } else {
                                    inst.copy(obj)
                                }
                            }
                        },
                        "paste": {
                            "separator_before": false,
                            "icon": false,
                            "_disabled": function (data) {
                                return !$.jstree.reference(data.reference).can_paste()
                            },
                            "separator_after": false,
                            "label": "粘贴",
                            "action": function (data) {
                                var inst = $.jstree.reference(data.reference),
                                    obj = inst.get_node(data.reference);
                                inst.paste(obj)
                            }
                        }
                    }
                }
            }
            return items;
        }

        function initData() {
            ajax({
                url: "resource/resourceFind",
                data: {
                    appKey:selectAppKey
                },
                successx: function (data) {
                    if (data.success) {
                        if (data.data == null || data.data.length==0){
                            $(".box-right").hide();
                        }

                        $('#jstree2').jstree("destroy");
                        $tree = $('#jstree2').jstree({
                            'core': {
                                "check_callback": function (operation, node, parent,
                                                            position, more) {
                                    console.log(operation)
                                    if (operation == "delete_node") {
                                        if (confirm("确认删除?")) {
                                            ajax({
                                                url: "menu/deleteMenuInfo",
                                                data: {
                                                    resourceId: node.id
                                                },
                                                type:'POST',
                                                dataType: "json",
                                                xhrFields: {
                                                    withCredentials: true
                                                },
                                                crossDomain: true,
                                                successx: function (data) {
                                                    console.log(data);
                                                    if (data.success) {
                                                        layer.msg(data.message)
                                                        initData()
                                                    } else {
                                                        layer.msg(data.message)
                                                    }
                                                }
                                            })
                                            return true
                                        } else {
                                            return false
                                        }
                                    }
                                    return true; // allow everything else
                                },
                                'data': data.data
                            },
                            'plugins': ['dnd', 'contextmenu', 'massload', 'state',
                                'wholerow', 'type'
                            ],
                            contextmenu: {
                                items: context_menu
                            }
                        });

                        // 移动
                        $('#jstree2').on('move_node.jstree', function (e, data) {
                            isCopy = 0;
                            //移动
                            console.log("id:" + data.node.id);
                            console.log("父节点:" + data.parent);
                            console.log("位置:" + data.position);
                            console.log("cut:" + isCopy);
                            isCopy = 0;
                            ajax({
                                url: "menu/updateMenuInfo",
                                data: {
                                    parentId: data.node.parent,
                                    resourceId: data.node.id
                                },
                                successx: function (data) {
                                    console.log(data);
                                    layer.msg(data.message)
                                    initData()
                                }
                            })
                        });

                        // 选中监听
                        $('#jstree2').on('select_node.jstree', function (e, data) {
                            //select_node
                            console.log("id:" + data.node.id);
                            resource_id = data.node.id;
                            if (data.node.parents.length > 1) {
                                console.log(data.node.original);
                                $("#resource_type").val(data.node.original.resource_type);
                                $("#description").val(data.node.original.description);
                                $("#permissions_code").val(data.node.original.permissions_code);
                                $("#resource_name").val(data.node.original.resource_name)
                                $("#resource_request_uri").val(data.node.original.resource_request_uri)
                                $("#priority").val(data.node.original.priority)
                                $("#resource_image_uri").val(data.node.original.resource_image_uri)

                                $(".box-right").show()
                            } else {
                                $(".box-right").hide()
                            }

                        });
                        $('#jstree2').on('cut.jstree', function (e, data) {
                            isCopy = 0
                            //cut
                        });
                        $('#jstree2').on('copy.jstree', function (e, data) {
                            isCopy = 1
                            //copy
                        });
                        $('#jstree2').on('paste.jstree', function (e, data) {
                            //paste
                            console.log(data)
                            if (isCopy == 0) {
                                //cut
                                console.log("id:" + data.node[0].id);
                                console.log("父节点:" + data.parent);
                                console.log("位置:" + 0);
                                console.log("cut:" + isCopy);
                                ajax({
                                    url: "menu/updateMenuInfo",
                                    data: {
                                        parentId: data.node.parent,
                                        resourceId: data.node[0].id
                                    },
                                    successx: function (data) {
                                        console.log(data);
                                        layer.msg(data.message)
                                        initData()
                                    }
                                })
                            } else {
                                //copy
                                console.log("id:" + data.node.id);
                                console.log("父节点:" + data.parent);
                                console.log("位置:" + 0);
                                console.log("cut:" + isCopy);
                            }
                            isCopy = 0
                        });
                        $('#jstree2').on('create_node.jstree', function (e, data) {
                            //新建
                            newId = data.node.id;
                            newPosition = data.position
                        });
                        $('#jstree2').on('rename_node.jstree', function (e, data) {
                            if (data.node.id == newId) {
                                console.log("新建")
                                console.log("父节点:" + data.node.parent);
                                console.log("位置:" + newPosition);
                                console.log("newtext:" + data.node.text);
                                ajax({
                                    url: "menu/addMenuInfo",
                                    data: {
                                        parentId: data.node.parent,
                                        resourceName: data.node.text
                                    },
                                    type:'POST',
                                    dataType: "json",
                                    xhrFields: {
                                        withCredentials: true
                                    },
                                    crossDomain: true,
                                    successx: function (data) {
                                        console.log(data);
                                        layer.msg(data.message)
                                        initData()
                                    }
                                })

                            }
                            newId = "";
                            newPosition = "";

                        });
                    } else {
                        layer.msg(data.message)
                    }
                }
            })
        }







        /**
         * 资源保存
         */
        var flag = 0;
        $("#save").click(function () {
            if (flag == 1) return;
            flag = 1;
            var resource_type=$("#resource_type").val();
            var description=$("#description").val();
            var permissions_code=$("#permissions_code").val();
            var resource_name=$("#resource_name").val();
            var resource_request_uri=$("#resource_request_uri").val();
            var priority=$("#priority").val();
            var resource_image_uri=$("#resource_image_uri").val();
            if(priority==""){
                layer.msg("请输入排序");
                return;
            }
            ajax({
                url: "menu/updateMenuInfo",
                data: {
                    resourceId: resource_id,
                    resourceType: resource_type,
                    permissionsCode: permissions_code,
                    resourceName: resource_name,
                    resourceRequestUri: resource_request_uri,
                    description:description,
                    priority:priority,
                    resourceImageUri:resource_image_uri
                },
                type:'POST',
                dataType: "json",
                xhrFields: {
                    withCredentials: true
                },
                crossDomain: true,
                successx: function (data) {
                    console.log(data);
                    flag = 0;
                    layer.msg(data.message)
                    initData() 
                }
            })
        })



    </script>
</body>

</html>